<template>
  <!-- 表格 -->
  <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData">
    <template #payTypeNameList="{ record }">
      <div v-for="(item, index) in record.payTypeNameList" :key="index">
        {{ item }}
      </div>
    </template>
    <template #remark="{ record }">
      <div class="all-remark">
        {{ record.remark }}
      </div>
      <a-link v-if="record.remark" @click="onShowMoreRemark(record)">查看更多</a-link>
    </template>
  </table-index>

  <!-- 查看更多备注 -->
  <a-modal
    width="45vw"
    v-model:visible="showMoreRemarkModal"
    title="费用备注"
    ok-text="关闭"
    hide-cancel
    @before-open="beforeOpenRemark"
    @ok="showMoreRemarkModal = false"
  >
    <table-index :table="tableRemark" />
  </a-modal>
</template>

<script setup name="ShortOrderCost" lang="ts">
  import { useTable } from '@/hooks/table'
  import { getShortOrdrFeeDetail, remarkLogList, selectFeeItemName } from '@/api/order/sOrder'
  import { ref, onMounted, reactive } from 'vue'

  import { cloneDeep } from 'lodash-es'

  const feeDetail = ref<any>({})
  const queryParam = reactive<any>({})

  const showMoreRemarkModal = ref(false)
  const cloneTableCompulsory = ref<any[]>([])

  const props = defineProps({
    orderId: Number,
  })

  // 获取筛选费用名称
  const selectFeeName = ref([])
  const selectFeeNameLoading = ref(false)
  const getFeeItemName = () => {
    selectFeeNameLoading.value = true
    selectFeeItemName({ id: props.orderId })
      .then((res: any) => {
        selectFeeName.value = res.result.map((item: any) => {
          return {
            label: item,
            value: item,
          }
        })
      })
      .finally(() => {
        selectFeeNameLoading.value = false
      })
  }

  const tableRemark = useTable({
    pagination: false,
    columns: [
      { title: '创建时间', dataIndex: 'createTime' },
      { title: '操作人', dataIndex: 'createUserName' },
      { title: '备注信息', dataIndex: 'operateLog' },
    ],
  })

  const currentRemark = ref<any>({})
  const beforeOpenRemark = () => {
    tableRemark.tableLoading = true
    remarkLogList({ orderId: currentRemark.value.orderId, id: currentRemark.value.id })
      .then((res: any) => {
        tableRemark.dataList = res.result
      })
      .finally(() => {
        tableRemark.tableLoading = false
      })
  }

  const onShowMoreRemark = (record: any) => {
    console.log('onShowMoreRemark', record)
    currentRemark.value = record
    showMoreRemarkModal.value = true
  }

  const getShortOrdrList = () => {
    return new Promise((resolve) => {
      getShortOrdrFeeDetail({ orderId: props.orderId, ...queryParam }).then((res: any) => {
        feeDetail.value = res.result
        const result = res.result
        tableCompulsory.dataList = result.map((item: any) => {
          return {
            ...item,
            totalEdit: false,
            payAmountEdit: false,
            totalAmountError: false,
            payAmountError: false,
          }
        })
        resolve(tableCompulsory.dataList)
      })
    })
  }

  const loadCompulsoryData = () => {
    tableCompulsory.tableLoading = true

    getShortOrdrList()
      .then((data: any) => {
        // 已结算 无需结算 不支持选择
        // data.map((it: any) => (it.disabled = [2, 9].includes(it.feeStatus)))
        cloneTableCompulsory.value = cloneDeep(data)
        console.log('tableCompulsory', data)
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }

  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '费用名称', dataIndex: 'itemName', width: 150, fixed: 'left' },
      { title: '总额(元)', dataIndex: 'amount', width: 150 },
      { title: '实结(元)', dataIndex: 'payAmount', width: 120 },
      { title: '未结(元)', dataIndex: 'waitPayAmount', width: 120 },
      { title: '生成节点', dataIndex: 'createNodeName', width: 100 },
      { title: '收支类型', dataIndex: 'costTypeName', width: 120 },
      { title: '结算状态', dataIndex: 'feeStatusName', width: 100 },
      { title: '支付方式', dataIndex: 'payTypeNameList', slotName: 'payTypeNameList', width: 140 },
      { title: '费用类型', dataIndex: 'feeTypeName', width: 120 },
      { title: '操作人', dataIndex: 'updateUserName', width: 120 },
      { title: '操作时间', dataIndex: 'updateTime', width: 180 },
      { title: '结算人', dataIndex: 'settlementUserName', width: 120 },
      { title: '结算时间', dataIndex: 'settlementTime', width: 180 },
      { title: '备注', dataIndex: 'remark', slotName: 'remark', width: 220 },
    ],
  })

  onMounted(() => {
    loadCompulsoryData()
    getFeeItemName()
  })
</script>

<style lang="less" scoped></style>
